<template>
  <div>
    <top-nav-bar :applyPageRoute="nowRouteTitle" @back="back"></top-nav-bar>
    <a-spin :spinning="spinning">
      <a-card :bordered="false">
        <div class="titleClass">
          <div>
            <span style="font-size:24px;margin-right:8px;color:#666">{{infomation.name||'--'}}
              <span v-if="infomation.finish_time" style="font-size:18px;margin-left:8px;color:#666">(已于{{infomation.finish_time|dayjs}}结业)</span>
            </span>

            <a-tag color="#108ee9" v-if="infomation.type==2">班课</a-tag>
            <a-tag color="#108ee9" v-if="infomation.type==1">一对一</a-tag>
          </div>

          <a-button type="primary" @click="showDrawer=true">编辑班级信息</a-button>
        </div>
        <div style="padding:0 20px;">
          <a-list :grid="{ gutter: 0, column: 1 }" :data-source="dataList" :bordered="false">
            <a-list-item slot="renderItem" :bordered="false">
              <div class="ant-col ant-col-8">
                <div class="basic-item">
                  <p v-if="infomation.structures&&infomation.structures.name">
                    <span class="rdistance">所属校区:</span>
                    <span>{{infomation.structures.name||'--'}}</span>
                  </p>
                  <p>
                    <span class="rdistance">关联课程:</span>
                    <span>{{infomation.course_name}}</span>
                  </p>
                  <p v-if="infomation.type==1">
                    <span class="rdistance">关联学员:</span>
                    <span v-if="infomation.student">
                      <span v-for="(i,k) in infomation.student" :key="k">
                        <span
                          style="cursor: pointer;"
                          @click="$router.push({name:'student_Info',query:{id:i.id}})"
                        >{{i.name}}</span>
                        <span v-if="k!==infomation.student.length-1">，</span>
                      </span>
                      <a-icon type="right" style="font-size:12px;margin-left:5px;" />
                    </span>
                    <span v-else>--</span>
                  </p>
                  <p>
                    <span class="rdistance">备注:</span>
                    <span style="display:inline-block;word-break:break-all;width:80%;vertical-align: top;">{{infomation.remarks||'--'}}</span>
                  </p>
                </div>
              </div>
              <div class="ant-col ant-col-8">
                <div class="basic-item">
                  <p>
                    <span class="rdistance">授课课时:</span>
                    <span>{{infomation.teaching_hours}}</span>
                  </p>
                  <p v-if="infomation.type==2">
                    <span class="rdistance">班级容量:</span>
                    <span>{{infomation.upper_limit||'未设置'}}</span>
                  </p>
                  <p>
                    <span class="rdistance">上课教室:</span>
                    <span>{{infomation.classroom_name||'--'}}</span>
                  </p>
                </div>
              </div>
              <div class="ant-col ant-col-8">
                <div class="basic-item">
                  <p v-if="infomation.type==1">
                    <span
                      v-if="infomation.surplus_class_hour&&infomation.surplus_class_hour.type==1"
                    >
                      <span class="rdistance">剩余课时:</span>
                      <span>{{infomation.surplus_class_hour.num}}</span>
                    </span>
                    <span
                      v-else-if="infomation.surplus_class_hour&&infomation.surplus_class_hour.type==2"
                    >
                      <span class="rdistance">剩余天数:</span>
                      <span>{{infomation.surplus_class_hour.num}}</span>
                    </span>
                    <span v-else>
                      <span class="rdistance">剩余课时:</span>
                      <span>--</span>
                    </span>
                  </p>

                  <p>
                    <span class="rdistance">班级老师:</span>
                    <span v-if="infomation.teacher.length==0">--</span>
                    <span v-else>
                      <span v-for="(item,index) in infomation.teacher" :key="index">
                        {{item.name}}
                        <span v-if="index!=infomation.teacher.length-1">,</span>
                      </span>
                    </span>
                  </p>
                </div>
              </div>
              <!-- <a-card :title="item.title">
              <div class="ant-col ant-col-8">
                <div class="basic-item">
                  <p>
                    <span>姓名:</span>
                    <span></span>
                  </p>
                  <p>
                    <span>性别:</span>
                    <span></span>
                  </p>
                  <p>
                    <span>手机号:</span>
                    <span></span>
                  </p>
                </div>
              </div>
              </a-card>-->
            </a-list-item>
          </a-list>
        </div>
      </a-card>
      <a-card :bordered="false" :style="{'margin-top':'20px' }" :bodyStyle="{padding:'12px 16px',}">
        <a-tabs v-model="type" @change="changes($event)">
          <a-tab-pane tab="排课信息" :key="1" v-if="!infomation.finish_time">
            <plan-lesson
              v-if="showComponents&&showPlanlesson"
              :coure="infomation.course_name"
              :classRoom="infomation.classroom_id"
              :teacher="infomation.teacher_ids"
              :structureID="infomation.structures.id?infomation.structures.id:null"
            ></plan-lesson>
          </a-tab-pane>
          <a-tab-pane tab="班级学员" :key="2" v-if="infomation.type==2&&!infomation.finish_time">
            <classmates
              v-if="showComponents&&showClassmates"
              :course="form.course_id"
              :courseName="infomation.course_name"
              :structureID="infomation.structures.id?infomation.structures.id:null"
            ></classmates>
          </a-tab-pane>
          <a-tab-pane tab="点名情况" :key="3">
            <take-name v-if="showComponents&&showTakeName" :className="infomation.name||'--'" :finish="infomation.finish_time"></take-name>
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-spin>
    <a-drawer
      title="编辑班级"
      placement="right"
      @close="showDrawer = !showDrawer"
      :width="520"
      :visible="showDrawer"
      :bodyStyle="{paddingBottom: '80px'}"
    >
      <a-spin :spinning="edit">
        <a-form-model
          ref="formsss"
          :model="form"
          :label-col="labelCol"
          :rules="rules"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="基本信息" labelAlign="left" :colon="false" class="form_title"></a-form-model-item>
          <a-form-model-item label="班级名称" prop="name">
            <a-input v-model="form.name" placeholder="请输入班级名称" />
          </a-form-model-item>

          <a-form-model-item label="所属校区" v-if="form.structures">{{form.structures.name||'--'}}</a-form-model-item>
          <a-form-model-item prop="course_id">
            <span slot="label">
              关联课程&nbsp;
              <a-tooltip title="购买关联课程的学员可以进班">
                <a-icon type="info-circle" />
              </a-tooltip>
            </span>
            {{form.course_name}}
          </a-form-model-item>
          <a-form-model-item prop="upper_limit" v-if="infomation.type!==1">
            <span slot="label">
              班级容量&nbsp;
              <a-tooltip title="班级容量及班级人数上限">
                <a-icon type="info-circle" />
              </a-tooltip>
            </span>
            <a-input-number :defaultValue="1" :min="1" :max="99999999" v-model="form.upper_limit" />
          </a-form-model-item>
          <!-- 班级分类 -->
          <!-- <a-form-model-item>
            <span slot="label">
              班级分类&nbsp;
              <a-tooltip title="可在【数据中心-教务数据】按班级分类查看数据">
                <a-icon type="info-circle" />
              </a-tooltip>
            </span>
            <a-select
              v-model="form.category_id"
              placeholder="请选择"
              style="width:200px;margin-right:10px;"
            >
              <a-select-option
                v-for="(item,index) in classifyList"
                :key="index"
                :value="item.id"
              >{{item.name}}</a-select-option>
            </a-select>
            <a @click="showChild()">设置</a>
          </a-form-model-item>-->
          <a-form-model-item label="其他信息" labelAlign="left" :colon="false" class="form_title"></a-form-model-item>
          <a-form-model-item prop="teaching_hours">
            <span slot="label">
              授课课时&nbsp;
              <a-tooltip title="设置后,本班级每次点名时“授课课时”默认为该数值">
                <a-icon type="info-circle" />
              </a-tooltip>
            </span>

            <a-input-number
              :defaultValue="1"
              :min="1"
              :max="99999999"
              v-model="form.teaching_hours"
            />
          </a-form-model-item>
          <a-form-model-item label="上课教室">
            <a-select
              v-model="form.classroom_id"
              placeholder="请选择上课教室"
              style="width:200px;margin-right:10px;"
            >
              <a-select-option :value="null">不指定</a-select-option>
              <a-select-option
                v-for="(item,index) in classroomListiii"
                :key="index"
                :value="item.id"
              >{{item.name}}</a-select-option>
            </a-select>
            <a href="javascript:;" @click="showClassroom()">设置</a>
          </a-form-model-item>
          <a-form-model-item label="班级老师">
            <a-select mode="multiple" v-model="form.teacher_ids" placeholder="请选择班级老师">
              <a-select-option
                v-for="(item,index) in teacherList"
                :key="index"
                :value="item.id"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="备注">
            <a-input
              v-model="form.remarks"
              placeholder="请输入(选填,最多输入100个字符)"
              :max-length="100"
              type="textarea"
            />
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 12, offset: 7 }">
            <a-button type="primary" @click="onSubmit('formsss')">确定</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </a-drawer>
    <class-type-model ref="class_type" @reload="getSelect"></class-type-model>
    <classroom-components ref="classRoom" @reload="getSelect"></classroom-components>
  </div>
</template>

<script>
import { STable } from '@/components'
import topNavBar from '@/components/topNavBar/topNavBar'
import { teacherList } from '@/api/teacher'
import { classInfo, classifyList, classChange } from '@/api/class'
import { classroomList } from '@/api/classroom'
//import { coursesList } from '@/api/courseCharge'
import { deepClone } from '@/utils/pub_methods_base'
import classTypeModel from '@/components/classType'
import classroomComponents from '@/components/classroomManage'
import classmates from './child/classmates'
import takeName from './child/takeName'
import planLesson from './child/planLesson'
export default {
  components: {
    topNavBar,
    classroomComponents,
    classTypeModel,
    STable,
    classmates,
    takeName,
    planLesson
  },
  data() {
    return {
      queryID: null,
      labelCol: { span: 7 },
      wrapperCol: { span: 14 },
      spinning: false,
      edit: false,
      infomation: {
        name: '',
        type: 1,
        teacher: [],
        structures: {
          id: null
        }
      },
      form: {},
      //抽屉开关
      showDrawer: false,
      teacherList: [],
      // coursesList: [],
      classifyList: [],
      classroomList: [],
      classroomListiii: [], //有校区筛选用这个
      rules: {
        name: [{ required: true, message: '请输入班级名称' }],
        teaching_hours: [{ required: true, message: '请输入授课课时' }]
      },
      dataList: [
        {
          title: '详情'
        }
      ],
      showComponents: false, //组件传参前为false
      type: 1, //默认展示的子页面
      showTakeName: false,
      showClassmates: false,
      showPlanlesson: true
    }
  },
  created() {
    this.nowRouteTitle = this.$route.meta.title
    this.queryID = this.$route.query.id
    this.type = this.$route.query.type ? Number(this.$route.query.type) : 1
    this.changes(this.type)
    this.getSelect()
  },
  methods: {
    changes(val) {
      if (val == 1) {
        this.showPlanlesson = true
        this.showClassmates = false
        this.showTakeName = false
      } else if (val == 2) {
        this.showPlanlesson = false
        this.showClassmates = true
        this.showTakeName = false
      } else {
        this.showPlanlesson = false
        this.showClassmates = false
        this.showTakeName = true
      }
    },
    getSelect() {
      this.spinning = true
      classifyList({ pageSize: 999999, school_id: this.$store.state.user.school }).then(res => {
        this.classifyList = res.data
      })
      classroomList({ pageSize: 999999, school_id: this.$store.state.user.school }).then(res => {
        this.classroomList = res.data
      })
      if (this.form.structures && this.form.structures.id) {
        this.getClassRoom()
      }
      teacherList({ pageSize: 999999, school_id: this.$store.state.user.school }).then(res => {
        this.teacherList = res.data
      })
      classInfo(this.queryID)
        .then(res => {
          let a = JSON.stringify(res)
          let params = JSON.parse(a)
          this.form = params
          this.form.classroom_id = params.classroom_id ? params.classroom_id : null
          this.infomation = res
          this.infomation.structures = res.structures || { id: null }
          this.showComponents = true
          this.spinning = false
        })
        .catch(err => {
          this.spinning = false
          this.$message.error(err.data.message || '加载失败')
        })
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.edit = true
          let data = JSON.parse(JSON.stringify(this.form))
          data.school_id = this.$store.state.user.school
          if (data.category_id == '') {
            data.category_id = null
          }
          if (data.classroom_id == '') {
            data.classroom_id = null
          }
          if (data.structures) {
            data.structures_id = data.structures.id
          } else {
            data.structures_id = null
          }
          classChange(data, Number(this.$route.query.id))
            .then(res => {
              this.$message.success('修改成功')
              this.getSelect()
              this.edit = false
              this.showDrawer = false
            })
            .catch(err => {
              this.edit = false
              this.$message.error(err.data.message || '修改失败')
            })
        } else {
          return false
        }
      })
    },

    getClassRoom() {
      classroomList({
        pageSize: 999999,
        school_id: this.$store.state.user.school,
        structures_id: this.form.structures.id || null
      }).then(res => {
        this.classroomListiii = res.data
      })
    },
    back() {
      this.$router.go(-1)
    },
    showClassroom() {
      this.$refs.classRoom.showModal()
    },
    showChild() {
      this.$refs.class_type.showModal()
    }
  },
  watch: {
    'form.structures'(val) {
      if (val) {
        this.getClassRoom()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.nowPage {
  padding: 0 8px;
  border-top: 1px solid #d9d9d9;
}
.titleClass {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
}
.rdistance {
  padding-right: 5px;
}
</style>